<template>
  <div>
    <div>
      昵称:
      <Input type="text" v-model="searchData.username" style="width: 150px;" clearable />
      手机号:
      <Input type="text" v-model="searchData.mobile" style="width: 150px;" clearable />

      时间：
      <Date-picker type="datetimerange" placeholder="" v-model="searchData.create_time"></Date-picker>
      <Button type="primary" @click="search()" style="margin-left: 10px;">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <!-- <Button type="info" @click="edit(false)" style="margin-left: 10px;">添加</Button> -->
    </div>
    <div style="margin-top: 10px;">
      <Table :columns="columns" :data="list" max-height="800" border stripe size="small">
        <template slot-scope="{ row , index}" slot="imgSlot">
          <show-img :imgUrl="row.avatar"></show-img>
        </template>
        <template slot-scope="{ row , index}" slot="makeSlot">
          <Button type="info" @click="edit(row)" size="small">编辑</Button>
          <!-- <Button type="warning" @click="bind(row.id)" style="margin-left: 10px;" size="small">绑定项目</Button> -->
          <Button type="error" @click="del(row.id)" style="margin-left: 10px;" size="small">删除</Button>
        </template>
      </Table>
    </div>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :currentPage="searchData.page">
    </Paginate>

    <!-- 编辑 -->
    <Modal :title="formItem.id > 0 ? '修改用户' : '添加用户'" v-model="editModal" :width="40" :mask-closable="false">
      <Form :model="formItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="formItem.username" maxlength="15"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="formItem.mobile" maxlength="11"></Input>
        </FormItem>
        <FormItem label="密码">
          <Input v-model="formItem.password"></Input>
        </FormItem>
        <FormItem label="余额">
          <Input v-model="formItem.money"></Input>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formItem.status">
            <Radio label="0" border>冻结</Radio>
            <Radio label="1" border>正常</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" long @click="editModalOk">确定</Button>
      </div>
    </Modal>


  </div>
</template>

<script>
import Paginate from "_c/paginate";
import ShowImg from '_c/show_img'
export default {
  name: "userList",
  components: {
    Paginate, ShowImg
  },
  data() {
    return {
      searchData: {
        sort: "desc",
        order_by: "id",
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        {
          title: '姓名',
          align: 'center',
          key: 'username',
        },
        {
          title: '手机号',
          align: 'center',
          key: 'mobile',
        },
        {
          title: '邀请人',
          align: 'center',
          key: 'invite_name',
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          slot: "imgSlot"
        },
        {
          title: '状态',
          align: 'center',
          key: 'status',
          render: (h, param) => {
            let txt = '';
            let color = '';
            if (param.row.status == 0) {
              txt = '冻结';
              color = 'red';
            } else {
              txt = '正常';
              color = 'blue'
            }
            return h('div', [
              h('span', {
                style: {
                  color: color
                }
              }, txt),
            ]);
          },
        },
        {
          title: '余额',
          align: 'center',
          key: 'money',
        },
        {
          title: '分享次数',
          align: 'center',
          key: 'shareNum',
        },
        {
          title: '分享收入',
          align: 'center',
          key: 'shareAmount',
        },
        {
          title: '注册时间',
          align: 'center',
          key: 'create_time',
        },

        {
          title: '操作',
          align: 'center',
          slot: 'makeSlot',
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {},
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      this.$axios('/admin/user/getList', this.searchData).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        sort: "desc",
        order_by: "id",
        page: 1,
        limit: 10
      }
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    edit(row) {
      if (row) {
        this.formItem = { ...row };
        this.formItem.status = this.formItem.status + '';
      } else {
        this.formItem = {
          id: 0,
          nick: "",
          invite_mobile: "",
          mobile: "",
          password: "",
          status: "1",
          goods_id: "",
        };
      }
      // this.getGoodsList();
      this.editModal = true;
    },
    editModalOk() {
      this.$axios('/admin/user/save', this.formItem).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    del(id) {
      this.$Modal.confirm({
        title: '删除操作',
        content: "<p>您确定要删除用户吗？</p>",
        onOk: () => {
          this.$axios('/admin/user/del', { id: id }).then(res => {
            this.$Message.success('执行成功');
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info('取消操作');
        }
      });
    },
    // 启用，禁用
    statusChange(id, status) {
      this.$axios("/admin/user/status", { id: id, status: status }).then(res => {
        this.getList();
      });
    },
    // 获取项目
    getGoodsList() {
      this.$axios("/admin/goods/getArr").then(res => {
        this.goodsList = res;
      });
    },

  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
